<template>
  <div id="login">
    <van-nav-bar>
      <template #title>
        <h4>欢迎登陆量晶晶智能交易系统</h4>
      </template>
    </van-nav-bar>
    <br/>
    <van-form colon @submit="onSubmit">
      <van-cell-group inset :border="false">
        <van-field v-model="form.username" name="username" label="账号" placeholder="请输入手机号码"
                   :rules="[{ required: true }, {validator: checkPhoneNumber, message: '手机号码错误'}]"/>
        <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="请输入登录密码"
                   :rules="[{ required: true }, {validator: checkPassword, message: '请输入包含数字和字母8~30位密码'}]"/>
        <van-cell :border="false" >
          <div class="link-box">
            <a href="/reset_password" style="margin: 0 auto;">忘记密码？</a>
          </div>
        </van-cell>
        <van-cell :border="false">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </van-cell>
        <van-cell :border="false">
          <van-button plain round block type="danger" native-type="button" @click="$router.replace('/register')">
            没有账号？去注册
          </van-button>
        </van-cell>
        <br/>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script>
import {checkPhoneNumber, checkPassword} from '@/validators'

export default {
  data() {
    return {
      form: {
        username: null,
        password: null
      }
    };
  },
  methods: {
    checkPhoneNumber: checkPhoneNumber,
    checkPassword: checkPassword,
    onSubmit(form) {
      this.$requests.post('/auth/login', form).then(resp => {
        this.$cookies.set('token', resp.token);
        if(this.$route.query.query) {
          this.$router.replace(this.$route.query.query)
        } else {
          this.$router.replace('/')
        }
      })
    }
  },
}
</script>

<style scoped>
h4 {
  color: #862c2d;
  text-align: center;
  width: 100%;
}
.link-box {
  margin-top: 15px;
  text-align: center;
  width:100%;
}
</style>
